<!-- 创建项目页面 -->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">订单延期</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<!--当前订单的时间信息-->
			<view class="input_box"> 
				<view class="input_label" style="font-size:36rpx;align-items:center;">
					<image src="../../static/all/d_jibenxinxi.png" style="width:45rpx;height:45rpx;"></image>
					<span style="padding: 10rpx;"></span>当前订单开始与截止时间：
				</view>
				<view class="i_label">开始时间：{{task_detail.startDate==null?'':task_detail.startDate.substring(0,16)}}</view>
				<view class="i_label">截止时间：{{task_detail.endDate==null?'':task_detail.endDate.substring(0,16)}}</view>
				<view class="space_15"></view>
			</view>
			<!--延期后的截止时间输入块-->
			<view class="input_box">
				<view class="input_label" style="font-size:36rpx;align-items:center;">
					<image src="../../static/list/edit.png" style="width:45rpx;height:45rpx;"></image>
					<span style="padding: 10rpx;"></span>请填写延期的原因
				</view>
				<view class="input_line1" style="margin-top:20rpx;">
					<uni-easyinput v-model="form_task_progress.remark" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请填写延期的原因">
					</uni-easyinput>
				</view>
				
				<view class="input_label" style="font-size:36rpx;align-items:center;margin-top:20rpx;">
					<image src="../../static/all/c_shijian.png" style="width:45rpx;height:45rpx;"></image>
					<span style="padding: 10rpx;"></span>请选择延期后的截止时间*
				</view>
				<view class="input_line1" style="margin-top:20rpx;">
					<uni-datetime-picker @change="showTimeRangeAccessTasks" type="datetime" v-model="form_task_progress.endDate" placeholder="截止时间" 
					                     :placeholderStyle="placeholderStyle" :start="today"/>
				</view>
				<view class="space_35"></view>
			</view>
			
			<!--显示时间段内的订单：标题-->
			<view v-if="timeRangeAccessTasks.length>0" class="input_box">
				<view class="input_label" style="font-size:36rpx;align-items:center;">
					<image src="../../static/all/c_xuanche .png" style="width:45rpx;height:45rpx;"></image>
					<span style="padding: 10rpx;"></span>该时间段内涉及如下订单：
				</view>
				<!--显示时间段内的订单开始-->
				<view class="l_order_box" v-for="(item,index) in timeRangeAccessTasks" :key="index">
					<view class="l_order_row" >
						<view class="l_order_row_L">申请人</view>
						<view class="l_order_row_R">{{item.createName}}</view>
					</view>
					<view class="l_order_row" >
						<view class="l_order_row_L">部门</view>
						<view class="l_order_row_R">{{item.location}}</view>
					</view>
					<view class="l_order_row" >
						<view class="l_order_row_L">时间</view>
						<view class="l_order_row_R">{{item.startDate.substr(0,16)}}至{{item.endDate.substr(5,11)}}</view>
					</view>
					<view class="l_order_row" >
						<view class="l_order_row_L">车辆</view>
						<view class="l_order_row_R">{{item.carModel}}<span style="padding:30rpx;"></span>{{item.carLicense}}</view>
					</view>
					<view style="width:650rpx;height:10rpx;"></view>
				</view>
				<!--显示时间段内的订单结束-->
				<view class="space_15"></view>
			</view>
			
			<view class="space_55"></view>
			<!--提交按钮行-->
			<view v-if="btn==1" class="form_btn" @click="form_task_progress_submit()">确认延期</view>
			<view v-if="btn==0" class="form_btn btn_notClick">提交中……</view>
			<view class="space_80"></view>
		</view>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				/*******************以下是通用变量（控件样式、日期时间等定义）******************/
				today:"", //保存当前"yyyy-MM-dd"格式的日期
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx", 
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				/*******************以上是通用变量（控件样式、日期时间等定义）******************/
				
				/************************以下是创建用车申请单相关变量**************************/
				accessTaskId: "", //用于接收页面传参（申请单任务id）
				task_detail:{} , //任务详情
				timeRangeAccessTasks: [], //某辆车某个日期对应的订车时段集合
				
				form_task_progress: {
					accessTaskId: '', //任务id
					endDate: '', //延期后的截止时间
					remark: '', //延期的原因
					status: 'able', //状态
				},
				/************************以上是创建用车申请单相关变量**************************/
				//防重复提交
				btn: 1, //0：不可用  1：可用（默认可用）
				
				//在此之上补充变量
			}
		},
		watch: {
			/*********************以下是监听创建创建用车申请单相关变量*********************/
			/*********************以上是监听创建创建用车申请单相关变量*********************/
		},
		onLoad(option) {
			// console.log("执行了onLoad方法");
			getApp().globalData.query_flag=0; //在子页面（提交成功后需要刷新父页面）中将刷新控制变量置为0
			if(JSON.stringify(option)!="{}"){
				this.accessTaskId=option.accessTaskId;
			}
			this.today=utils.dateFormat("small");
			this.getTask_detail(); //取订单明细
		},
		onShow() {
		},
		methods: {
			/******************************以下是通用方法*********************************/
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			/******************************以上是通用方法**********************************/
			
			/****************************以下是业务相关方法********************************/
			//获取用车申请单明细基本信息（有用）
			getTask_detail(){
				var that=this;
				utils.getTask(this.accessTaskId).then(res => {
					console.log('延期页面获取用车申请单明细的返回值==',res); 
					if(res.data.status=="success"){
						that.task_detail=res.data.accessTask;
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						}) 
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
				
			},
			
			showTimeRangeAccessTasks(e){
				var that=this;
				console.log("新的截止日期==",e);
				//1：先判断新的截止日期要大于老的截止日期
				var d1=new Date(that.task_detail.endDate); //老的截止日期
				var d2=new Date(e); //新的截止日期
				if(d1>d2){
					uni.showModal({
						title: '提示',
						content: '新的截止日期要大于老的截止日期！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				//2：执行查询新的时间段下，指定车辆所对应的订单列表（只查询延长的时间段之内的）
				var startDate=that.task_detail.endDate; //注意：开始时间取订单的原截止时间 加1秒
				var endDate=e; //截止时间取新的延长后的时间
				console.log('获取取指定车辆（'+that.task_detail.carId+'）在指定的时间段',startDate,"--",endDate);
				//执行查询选中日期的订车时间段逻辑
				var obj={};
				obj.pageSize=1000;
				obj.pageIndex=1;
				obj.carId=that.task_detail.carId;
				obj.startDate=startDate;
				obj.endDate=endDate;
				obj.status="running";
				//调用获取取指定车辆在指定的时间段之内的的订车时间段列表
				that.timeRangeAccessTasks=[]; //先初始化结果集
				console.log('获取指定车辆在指定的时间段之内的的订车时间段列表的接口参数obj==',obj);
				utils.listTask(obj).then(res => {
					console.log('获取指定车辆在指定的时间段之内的的订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						var arr=res.data.rows;
						for(var i=0;i<arr.length;i++){
							var obj=arr[i];
							if(obj.accessTaskId==that.task_detail.accessTaskId){ //过滤到自身的订单（自身的订单不显示在列表中）
								continue;
							}else{
								that.timeRangeAccessTasks.push(obj);
							}
						}
						console.log('获取指定车辆在指定的时间段之内的的订车时间段列表的返回值（去除当前订单后的）==',that.timeRangeAccessTasks);
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						}) 
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			
			//延时申请提交
			form_task_progress_submit(){
				var that=this;
				//1：校验空
				if(that.form_task_progress.endDate==""){ //开始时间
					uni.showModal({
						title: '提示',
						content: '请选择延时后的截止时间！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				//2：执行提交
				that.form_task_progress.accessTaskId=that.accessTaskId;
				console.log("提交前的form_task_progress==",that.form_task_progress);
				var msg=""; //确认延期本次订单吗？（本次延期操作将会自动终止该时间段内已有的尚未执行的订单，确认延期本次订单吗？）
				if(that.timeRangeAccessTasks.length==0){
					msg="确认延期本次订单吗？";
				}else{
					msg="本次延期操作将会自动终止该时间段内已有的尚未执行的订单，确认延期本次订单吗？";
				}
				uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								that.btn=0; //按钮置为不可用
								utils.delayEvent(that.form_task_progress).then(res => {
									console.log('延期订单接口的返回值==',res); 
									that.btn=1; //无论成功与否按钮均置为可用
									if(res.data.status=="success"){
										getApp().globalData.query_flag=1; //查询全局控制变量(避免列表页面重复查询2次)
										uni.showToast({
											title:'订单延期成功!',
											icon: 'success',
											duration: 2000,
										});
										setTimeout(() => {
											utils.pageBack();
										}, 2000); //显示toast 2秒钟之后执行
									}
									if(res.data.status=="error"){
										let msg=res.data.message;
										uni.navigateTo({
											url:'/pages/error/error?errorMsg='+msg 
										}) 
									}
								}).catch(error => {
									uni.navigateTo({
										url:'/pages/error/error?errorMsg='+error
									})
								})
							} 
							else {
								//执行取消后的操作
							}
						}
					})
					//uni.showModal结束
			},
			/****************************以上是业务相关方法********************************/
			
			/*********************在此之上补充方法**********************/
		},
	}
</script>
<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/b_form.css';
@import '../../common/css/list.css';
.i_label{ /*控件标题*/
	width: 650rpx;
	height: 50rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	flex-shrink: 0; /*不可被压缩*/
	color: #808080;
	font-size: 30rpx;
	line-height: 50rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
}
.l_order_box{ 
	width: 680rpx;
	/* height: 600rpx; //由于项目描述有可能多行，因此这里不设固定高度 */ 
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #F7F7F7;  
	border-radius: 15rpx;
	margin-top: 10rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.l_order_row{ /* 普通的左右结构的行 */
	width: 660rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.l_order_row_L{ /* 左侧标题 */
	width: 110rpx;
	height: 50rpx;
	color: #808080;
	font-size: 30rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 50rpx;
	font-weight: 900;
	margin-left: 10rpx;
}
.l_order_row_R{ /* 右侧文字 */
	width: 550rpx;
	height: 50rpx;
	color: #515151;
	font-size: 30rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 50rpx;
}

</style>